<template>
  <div class="todo-container">
    <div class="todo-wrap">
      <TodoHeader :addTodo="addTodo"></TodoHeader>
      <TodoList :todos="todos" :delOneTodo="delOneTodo" v-if="todos.length" :isSelect="isSelect"></TodoList>
      <TodoFooter v-if="todos.length" :todos="todos" :checkedTodos="checkedTodos" :delChecked="delChecked"></TodoFooter>
    </div>
  </div>
</template>

<script>
  import TodoHeader from "./components/TodoHeader";
  import TodoList from "./components/TodoList";
  import TodoFooter from "./components/TodoFooter";
  
  export default {
    name: "App",
    components: {
      TodoHeader,
      TodoList,
      TodoFooter
    },
    data() {
      return {
        todos: [
          {id: 1, content: '小芋头', isDone: false},
          {id: 2, content: '小', isDone: true},
          {id: 3, content: 'ok', isDone: false},
        ]
      }
    },
    methods: {
      addTodo(content) {
        let newTodos = [...this.todos]
        newTodos.unshift({
          id: Date.now(),
          content,
          isDone: false
        })
        this.todos = newTodos
      },
      delOneTodo(id) {
        const newTodos = this.todos.filter(item => {
          return item.id !== id
        })
        this.todos = newTodos
      },
      isSelect(id) {
        const todo = this.todos.find(item => {
          return item.id === id
        })
        todo.isDone = !todo.isDone
      },
      checkedTodos(isDone) {
        this.todos.forEach(item => {
          item.isDone = isDone
        })
      },
      delChecked() {
        this.todos = this.todos.filter((item)=>!item.isDone)
      }
    }
  }
</script>

<style scoped>
  /*app*/
  .todo-container {
    width: 600px;
    margin: 0 auto;
  }
  
  .todo-container .todo-wrap {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
  }

</style>